<template>
	<div id="container">
		<header>
			<van-nav-bar title="订单中心" left-text="返回" left-arrow @click-left="onClickLeft">
				<van-icon name="search" slot="right" />
			</van-nav-bar>
		</header>
		<div id="content">

				<van-tabs animated v-model='active'>
					<van-tab   title="全部" >	
						<div class="main2-hide"  v-for="(pros,i) in all1" :key="'pr'+i">
						<van-nav-bar	  
						  :left-text="'订单编号：'+pros.oid"
						  :right-text="pros.state"
						/> 
						        
						        <div class="main2-btm" >
						          <div class="btm-wrap" >
						            <img :src="pros.pimg" alt="">
									
						          </div>
								<span class="pronum">{{pros.pprice}}元</span>
						        </div>
								<div class="main-btn">
									<div class="cancel" @click="cancel(pros.oid)" >
										取消订单
									</div>
									<div class="pay">
										立即付款
									</div>
								</div>
								
								
						</div>

					

					</van-tab>
					<van-tab   title="已支付" >
							<div class="main2-hide"  v-for="(pros,i) in all2" :key="'pr'+i">
							<van-nav-bar	  
							  :left-text="'订单编号：'+pros.oid"
							  :right-text="pros.state"
							/> 
							        
							        <div class="main2-btm" >
							          <div class="btm-wrap" >
							            <img :src="pros.pimg" alt="">
										
							          </div>
									<span class="pronum">{{pros.pprice}}元</span>
							        </div>
									<div class="main-btn">
										<div class="cancel" @click="cancel(pros.oid)" >
											取消订单
										</div>
										<div class="pay">
											立即付款
										</div>
									</div>
									
									
							</div>
					
						
					
						</van-tab>
						<van-tab   title="待支付" >
								<div class="main2-hide"  v-for="(pros,i) in all3" :key="'pr'+i">
								<van-nav-bar	  
								  :left-text="'订单编号：'+pros.oid"
								  :right-text="pros.state"
								/> 
								        
								        <div class="main2-btm" >
								          <div class="btm-wrap" >
								            <img :src="pros.pimg" alt="">									
								          </div>
										<span class="pronum">{{pros.pprice}}元</span>
								        </div>
										<div class="main-btn">
											<div class="cancel" @click="cancel(pros.oid)" >
												取消订单
											</div>
											<div class="pay">
												立即付款
											</div>
										</div>
										
										
								</div>
						
							
						
							</van-tab>
		
								
					<van-tab title="待发货">	
						<div class="orders-item">
							<van-icon name="notes-o" />
							<h3>您还没有相关订单</h3>
							<button>去逛逛</button>
						</div>
					</van-tab>
					<van-tab title="待评价">	
						<div class="orders-item">
							<van-icon name="notes-o" />
							<h3>您还没有相关订单</h3>
							<button>去逛逛</button>
						</div>
					</van-tab>
					<van-tab title="退换货">	
						<div class="orders-item">
							<van-icon name="notes-o" />
							<h3>您还没有相关订单</h3>
							<button>去逛逛</button>
						</div>
					</van-tab>
				</van-tabs>
		</div>
	</div> 
</template>

<script>
import * as api1 from "../../api/delateorder"	
import * as api from "../../api/getuserorder"
import {Dialog} from 'vant'
	export default {
		name: "Order",
		data() {
			return {
				index:'',
				arr:[
					"全部",
					"待支付",
					"已支付",
					"待收货",
					"待评价",
					"退换货"
				],
				active:1,
				all1:[],
				all2:[],
				all3:[],
				prolist:[],
				orders:[]
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			cancel(id){
				api1.deleteorder({oid:id}).then(data=>{
					Dialog({message:'取消成功'}).then(()=>{
						// 查询全部订单
							let uids=this.$store.state.uids
							let obj=[]
							let pros=[]
						api.getUserorder({uid:uids}).then((data)=>{
				console.log(data)
				let arrs=data.data.data
				console.log(arrs)
				for(let i=0;i<arrs.length;i++){
					 if(arrs[i].ispay==true){
						 obj.push(arrs[i])
						arrs[i].state='已支付'
					 }else{
						 pros.push(arrs[i])
						 arrs[i].state='待支付'
					 }
					 
					
					 
				}
				this.all1=arrs
				this.all3=obj
				this.all2=pros
			})
					})
				})
			}
		},
		mounted(){
			// 接收对应的id，使得显示对应的选项
			this.active=parseInt(this.$route.params.id)
			// 查询全部订单
			let uids=this.$store.state.uids
			let obj=[]
			let pros=[]
			api.getUserorder({uid:uids}).then((data)=>{
				console.log(data)
				let arrs=data.data.data
				console.log(arrs)
				for(let i=0;i<arrs.length;i++){
					 if(arrs[i].ispay==true){
						 obj.push(arrs[i])
						arrs[i].state='已支付'
					 }else{
						 pros.push(arrs[i])
						 arrs[i].state='待支付'
					 }
					 
					
					 
				}
				this.all1=arrs
				this.all2=obj
				this.all3=pros
			})
			
			
			
		}
	}
</script>

<style scoped>

#container{
	height: 100%;
	background:#F3F3F3;
}

/* ---------------------orders-header--------------- */
header .van-nav-bar {
	height: 48px;
}
header .van-icon-arrow-left{
	color: #373737;
	font-size:16px;
	font-weight: 600;
}
header .van-nav-bar__text{
	color: #373737;
	font-size:16px;
	font-weight: 600;
	font-family: "楷体";
}
header .van-nav-bar__title{
	font-size:18px;
	font-weight:600;
	font-family:"楷体";
	color:#222222;
}
header .van-icon-search{
	color:#222222;
	font-size: 22px;
	font-weight:600;
}
/* -----------------------orders-tab---------------- */
#content{
	height: 100vh;
}
#content .orders-item{
	text-align: center;
}
#content .van-icon-notes-o{
	font-size: 150px;
	color: #c0c4c7;
	margin-top:120px;
}
#content .orders-item h3{
	font-family: "楷体";
	font-size: 20px;
	color: #2b2b2b;
}
#content .orders-item button{
	borders: 0;
	width:105px;
	height:30px;
	background:#F3F3F3;
	color: #616161;
	borders: 2px solid #e3e3e3;
	borders-radius: 5px;
	font-size: 15px;
	font-family: "楷体";
}
.main2-hide{
  /* height: 190px; */
    borders-top: 6px solid #f3f3f3;
  borders-bottom: 6px solid #f3f3f3;
  background: #fff;
  padding-bottom: 10px;

}
.main-btn{
	display: flex;
	padding-left: 200px;
}
.main-btn .cancel{
	font-size: 16px;
	padding: 8px;
	width: 80px;
	height: 20px;
	borders: 1px solid #d3d3d3;
}
.main-btn .pay{
	font-size: 16px;
	padding: 8px;
	width: 80px;
	height: 20px;
	color: red;
	margin-left: 10px;
	borders: 1px solid red;
}
.main2-hide .main2-btm{
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  width: 100%;
  height: 110px;
  align-items: center;
  position: relative;
}
.pronum{
  position: absolute;
  color: #333333;
  bottom: 45px;
  margin: auto;
  right: 20px;
  font-style: normal;
}
.btm-wrap{
  borders: 1px solid #d3d3d3;
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  margin-right: 8px;
  position: relative;
}
.btm-wrap img{
  width: 100%;
  height: 100%;
}

</style>
